<template>
    <div class="gosearch">
        <div class="header">
            <div @click="go">
                <van-icon name="arrow-left" />
            </div>
            <input type="text" @keyup.13="search" placeholder="请输入内容" class="inp" v-model="searchtext">
            <div class="quxiao" @click="search">确定</div>
        </div>

        <div class="search-content">
            <span> 历史搜索</span>
            <div @click="delet">
                <van-icon name="delete" />
            </div>
        </div>

        <!-- 搜索记录 -->
        <!-- <ul class="search-history">
            <li v-for="item in searchlist" :key="item">{{item}}</li>
        </ul> -->

        <!-- 数据渲染 -->
        <div v-for="item in searchdata" :key="item.id">
            <p class="title">{{item.title}}</p>

            <div class="lesson">
                <div><span></span>03月25日 18:00 ~ 03月31日</div>
                <div>共{{item.total_periods}}课时</div>
            </div>


            <div class="teacher" v-for="(item1,index) in item.teachers_list" :key="item1.id">
                <img class="img" :src="item1.teacher_avatar" alt="">
                <span class="TN">{{item1.teacher_name}}</span>
            </div>

            <div class="li-foot">
                <span> {{item.total_periods}}人报名</span>
                <span v-if='item.price!=0'>{{item.price}}</span>
                <span v-if='item.price==0'>免费</span>
            </div>
        </div>

    </div>
</template>

<script>
    import { Icon } from 'vant';
    import { goodat } from "../api/index"
    export default {
        name: 'Gosearch',
        components: {
            [Icon.name]: Icon
        },
        data() {
            return {
                course: [],
                searchdata: [],
                searchlist: [],
                searchtext: "",
                // localStorageName: "sgNavSearchList",//保存到storage的键名

            }
        },
        mounted() {
            this.begoodat();
        },
        methods: {
            //搜到的所有数据
            async begoodat() {
                const res = await goodat()
                console.log(res)
                this.course = res.data.list;
                // console.log(this.course)

            },
            //返回上一页
            go() {
                // this.$router.push("/lesson")
                window.history.go(-1)
            },
            //搜索
            search() {
                let searchtext = this.searchtext.trim();
                if (searchtext) {
                    this.course.forEach(item => {
                        //如果包含你搜索的就是-1
                        if (item.title.indexOf(searchtext) != -1) {
                            this.searchdata.push(item)
                            this.searchlist.unshift(this.searchtext)
                        }
                            // 把搜索记录保存到vueX
                            // this.$store.commit('history',this.searchtext);
                            // 清空输入框
                            this.searchtext=''


                    });
                }
                   this.searchlist = Array.from(new Set(this.searchlist)),//给数组去重--Array.from(new Set(xx))
                    //取5个
                    this.searchlist = this.searchlist.slice(0, 5)
              

                //搜索所有内容
                // console.log(this.course);

                // var searchtext = this.searchtext;//输入的搜索内容

                // console.log(searchtext)

                // this.searchdata = [];//存放搜索结果

                // for (var i = 0; i < this.course.length; i++) {//对比所有数据标题与输入的内容
                //     if (this.course[i].title.indexOf(searchtext) >= 0) {//IndexOf
                //         // console.log(this.course[i])
                //         this.searchdata.push(this.course[i])//把所有数据中符条件的放到新的搜索页面
                //     }
                //     else {
                //         // alert("暂无查询条件")
                //     }
                // }
            },
            //删除
            delet() {
                this.searchlist.splice(0, 5)
            },





        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .header {
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
    }

    .inp {
        width: 268px;
        height: 34px;
        border-radius: 35px;
        background: #eee;
        border: none;
        padding-left: 30px;
        box-sizing: border-box;
        font-size: 16px;
    }

    .search-content {
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        padding: 5px 20px;
        box-sizing: border-box;
    }

    .search-history {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    li {
        background: #eee;
        width: 25%;
        height: 40px;
        /* line-height:40px; */
        text-align: center;
        line-height: 40px;
        margin: 5px;
    }

    /* 渲染数据样式 */
    .title {
        line-height: 50px;
        font-size: 16px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #efefef;
    }

    .lesson {
        display: flex;
        justify-content: space-between;
    }

    .teacher {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: left;
        align-items: center;
        display: inline-block;
        margin: 3px;
    }

    .img {
        width: 40px;
        height: 40px;
        border-radius: 50%;

    }

    .TN {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .li-foot {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        widows: 100%;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #eeeeee;
    }
</style>